<template>
  <div class="">
    <plate-card title="报警信息">
      <div class="px-2 py-4">
        <el-row>
          <el-col v-for="(item, index) in dataList" :key="index" :span="6" class="flex flex-col items-center justify-center">
            <el-avatar :size="60" :src="item.icon"></el-avatar>
            <div class="mt-2 text-[#6AE0FD] font-bold text-[24px]">{{ item.value }}</div>
            <div class="mt-1 text-[16px]">{{ item.title }}</div>
          </el-col>
        </el-row>
      </div>
      <div class="h-[280px] p-2">
        <dv-scroll-board :config="config" style="width: 100%; height: 100%" />
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import { reactive, ref } from 'vue'
  import CardHeader from '@/assets/vue.svg'

  const dataList = ref([
    { icon: CardHeader, value: '17', title: '温度(℃)' },
    { icon: CardHeader, value: '23', title: '温度(℃)' },
    { icon: CardHeader, value: '216', title: '温度(℃)' },
    { icon: CardHeader, value: '280', title: '温度(℃)' }
  ])

  const config = reactive({
    header: ['异常名称', '状态', '时间', '地点'],
    data: [
      ['无人机异常', '<span style="color:#fb7293;">待处理</span>', '2024-1-8 17:51:03', '地块一'],
      ['风机异常', '<span style="color:#32c5e9;">处理中</span>', '2024-1-8 17:51:03', '地块二'],
      ['除草机异常', '<span style="color:#31c755;">已完成</span>', '2024-1-8 17:51:03', '地块三'],
      ['风机异常', '<span style="color:#31c755;">已完成</span>', '2024-1-8 17:51:03', '地块四']
    ],
    index: false,
    rowNum: 4,
    headerHeight: 28,
    headerBGC: 'rgba(0, 59, 81, 0.8)',
    oddRowBGC: 'transparent',
    evenRowBGC: 'transparent',
    // columnWidth: [50],
    align: ['center']
  })
</script>

<style scoped></style>
